<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <button id="btn">防抖</button>
    <button id="btn1">节流</button>
    <div class="btn">流光按钮</div>
    <style>
        @keyframes move {
            0% {
                background-position: 0%;
            }

            100% {
                background-position: 100%;
            }
        }

        .btn {
            position: relative;
            width: 300px;
            height: 110px;
            color: white;
            line-height: 80px;
            font-size: 60px;
            font-family: sans-serif;
            text-transform: uppercase;
            /* //转化为大写字母 */
            text-align: center;
            border-radius: 40px;
            background: linear-gradient(90deg, rgb(242, 97, 94), rgb(234, 150, 104), rgb(251, 200, 2), rgb(174, 9, 43), rgb(108, 40, 243), rgb(212, 4, 128), rgb(85, 132, 206));
            background-size: 400%;
            border: none;
            outline: none;
            text-shadow: 0 0 3px white,
                0 0 3px white,
                0 0 3px white;
            /* //加亮 */
            z-index: 1;
        }

        .btn:hover {
            animation: move 2s linear alternate infinite;
        }

        .btn::before {
            content: '';
            position: absolute;
            top: -5px;
            left: -5px;
            width: 310px;
            height: 120px;
            background: linear-gradient(90deg, rgb(242, 97, 94), rgb(234, 150, 104), rgb(251, 200, 2), rgb(174, 9, 43), rgb(108, 40, 243), rgb(212, 4, 128), rgb(85, 132, 206));
            background-size: 400%;
            opacity: 0;
            border-radius: 45px;
            transition: .6s;
            z-index: -1;
        }

        .btn:hover::before {
            filter: blur(10px);
            opacity: 1;
            animation: move 2s linear alternate infinite;
        }



        * {
            padding: 0px;
            margin: 0px;
        }

        .box1 {
            background-color: red;
            width: 100px;
            height: 100px;
        }

        .box2 {
            background-color: purple;
            width: 100px;
            height: 100px;
        }

        .box3 {
            background-color: blue;
            width: 100px;
            height: 100px;
        }

        body {
            height: 2000px;
            background-color: black;
        }
    </style>
    <!--     <script src="https://js.fundebug.cn/fundebug.2.5.0.min.js"
        apikey="0e9afc13d3205ae38307863a37dc332485dfc0bdabf49517853d2c0a12d0be24" crossorigin="anonymous"></script> -->
    <script>
        var b1 = document.querySelector(".box1")
        var b2 = document.querySelector(".box2")
        var b3 = document.querySelector(".box3")
        console.log("屏幕宽度", document.documentElement.clientHeight, document.documentElement.clientWidth);
        console.log(b2.offsetTop);
        console.log(document.documentElement.scrollTop);
        var count = 0
        function f(a) {
            console.log("打印了" + a);
        }
        function debounce(f, wait) {
            let timer
            return (count, ...args) => {
                clearTimeout(timer)
                timer = setTimeout(() => {
                    f(...args)
                }, wait)
            }
        }

        /* function debounce(fn, wait) {
        let itimer = null
        return (...args) => {
        clearTimeout(timer)
        setTimeout(() => {
        fn(...args)
        }, waut);
        }
        } */


        var btn = document.getElementById("btn");
        btn.onclick = debounce(function () {
            count++
            console.log(count);
        }, 1000)



        function throttle(f, wait) {
            let timer
            return (...args) => {
                if (timer) { return }
                timer = setTimeout(() => {
                    f(...args)
                    timer = null
                }, wait)
            }
        }
        /* function throttle(f,wait){
        let timer
        return (...args)=>{
        if(itmer) {return }
        timer=setTimeout(()=>{
        f(...args)
        timer=null
        },wait)
        }
        } */




        var count = 0
        var btn1 = document.getElementById("btn1");
        btn1.onclick = throttle(function (e) {
            count++
            console.log(count, e);
        }, 2000)
        //错误捕获 异步
        /* window.onerror = function (message, source, lineno, colno, error) {
        console.log('捕获到异常：', { message, source, lineno, colno, error });
        } */
        /*   setTimeout(() => {
              UndefVar;
          }); */
        someBody = {
            age: 0
        }
        const yourAge = someBody.age ?? 19
        const yourAge1 = someBody.age || 19
        console.log(yourAge,yourAge1);

    </script>

</body>

</html>